<template>
  <div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="/">
        支撑平台
      </el-menu-item>
      <el-menu-item index="">
        <a href="/project.html" target="_blank">客户项目（本地）</a>
      </el-menu-item>
      <el-menu-item index="">
        <a href="/nf-plat-vite2-vue3/project" target="_blank">客户项目（gitee）</a>
      </el-menu-item>
      <el-menu-item index="/plat">
        <a href="https://naturefw.gitee.io/nf-plat-vite2-vue3" target="_blank">支撑平台(gitee)</a>
      </el-menu-item>
      <el-menu-item index="/project2">
        <a href="https://naturefw.gitee.io/nf-plat-vite2-vue3/project" target="_blank">客户项目（gitee）</a>
      </el-menu-item>
    </el-menu>
    <!--多标签的增删改查-->
    <el-row class="tac">
      <el-col :span="3">
        <!--菜单-->
        <nf-menu/>
      </el-col>
      <el-col :span="21">
        <!--tab-->
        <nf-tabs/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { reactive, ref } from 'vue'
  // 组件
  import nfMenu from './views/project/menu.vue'
  import nfTabs from './views/project/tab.vue'

  // tab 的状态
  import tabManage from './controller/state-tab.js'
  console.log('app.vue')

  export default {
    name: 'project-index'
  }

  </script>

  <script setup>
  console.log('app.vue')
  // 列表的状态管理类
  const { regState } = tabManage()
  // 注册 tab 的状态
  const tabState = regState()

  const activeIndex = ref('/')

  const handleSelect = () => {
  }

</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  color: #2c3e50;
  margin-top: 10px;
}
</style>
